<!DOCTYPE html>
<html lang="en"xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../res/css/main.css">
    <!--加载meta IE兼容文件-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    .userLabel{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-left: 30px
    }
</style>
<body>
<div class="header" style="margin-bottom: 40px">
    <div class="menu-btn">
        <div class="menu"></div>
    </div>
    <h1 class="logo">
        <a href="index.html">
            <span>MYBLOG</span>
            <img src="../res/img/logo.png" style="width: 120px;height: 80px">
        </a>
    </h1>
    <div class="nav">
        <a href="/toIndex.action" >文章</a>
        <a href="/toMyBlog.action">我的博客</a>
        <a href="/toWrite.action">写博客</a>
        <a href="/toAlbum.action">相册</a>
        <a href="/toAbout.action"class="active">个人空间</a>
        <input form="searchForm" type="text" name="searchKey" placeholder="  搜索博客"  style="border-radius: 4px
      ;padding: 3px 0px;font-family: Microsoft YaHei UI;border-style: solid;border-color: forestgreen;">
        <button class="layui-btn" onclick="search()"><i class="layui-icon">&#xe615;</i>搜索</button>
        <label th:if="${session.loginUser != null}">
            <img class="userLabel" th:if="${session.loginUser.sex == 'female'}"src="../res/img/label/girl.png" >
            <img class="userLabel" th:if="${session.loginUser.sex == 'male'}"src="../res/img/label/boy.png" >
            <a href="/toAbout.action" style="color: forestgreen;margin-left: 5px;" th:text="'欢迎您,'+${session.loginUser.name}"></a>
        </label>
    </div>
    <form id="searchForm" action="/searchEssayByTitle.action"></form>
    <ul class="layui-nav header-down-nav">
        <li class="layui-nav-item"><a href="/toIndex.action" >所有文章</a></li>
        <li class="layui-nav-item"><a href="/toMyBlog.action">我的博客</a></li>
        <li class="layui-nav-item"><a href="/toWrite.action">写博客</a></li>
        <li class="layui-nav-item"><a href="/toAlbum.action">相册</a></li>
        <li class="layui-nav-item"><a href="/toAbout.action">个人空间</a></li>
        <li class="layui-nav-item" th:if="${session.loginUser == null}"><a href="toLogin">登录</a></li>
        <li class="layui-nav-item" th:if="${session.loginUser != null}"><a href="toLogout">注销</a></li>
    </ul>
    <div th:if="${session.loginUser == null}">
        <p  class="welcome-text">
            <a href="toLogin" class="layui-btn">登录</a>
        </p>
    </div>
    <div th:if="${session.loginUser != null}">
        <p  class="welcome-text">
            <a href="toLogout" class="layui-btn">注销</a>
        </p>
    </div>
</div>

<div class="about-content" style="margin-top: 40px">
    <div class="w1000">
        <div class="item info">
            <div class="title">
                <h3>我的介绍</h3>
            </div>
            <div class="cont">
                <img th:src="@{${session.mainAlbumUrl}}" alt="" style="width: 360px;height: 220px;;margin-left: 15%;">
                <div class="per-info">
                    <p>
                        <input type="hidden" th:value="${session.loginUser.id}" id="id">

                        <i class="layui-icon" style="font-size: 18px">&#xe770;</i>
                        <label> 昵称:  </label>
                        <span class="name" th:text="${session.loginUser.name}" id="name"></span>
                        <input type="hidden" th:value="${session.loginUser.name}" id="value1">
                        <span class="name"><input class="layui-input" style="display: none;width: 200px" id="input1"></span>
                        <span class="name"><button class="layui-btn" onclick="enter1()" style="display: none;float: right;margin-right: 15%;" id="btn1">确定</button></span>
                        <span class="name"><button class="layui-btn" onclick="display1()" style="float: right;margin-right: 15%;" id="b1">编辑</button></span><br />

                        <i class="layui-icon" style="font-size: 18px">&#xe637;</i>
                        <label> 年龄:  </label>
                        <span class="age" th:text="${session.loginUser.age}" id="age"></span>
                        <input type="hidden" th:value="${session.loginUser.age}" id="value2">
                        <span class="age"><input class="layui-input" style="display: none;width: 200px" id="input2"></span>
                        <span class="age"><button class="layui-btn" onclick="enter2()" style="display: none;float: right;margin-right: 15%;" id="btn2">确定</button></span>
                        <span class="age"><button class="layui-btn" onclick="display2()" style="float: right;margin-right: 15%;" id="b2">编辑</button></span><br />

                        <i class="layui-icon" style="font-size: 18px">&#xe612;</i>
                        <label> 职业:  </label>
                        <span class="Career" th:text="${session.loginUser.personMessage}" id="personMessage"></span>
                        <input type="hidden" th:value="${session.loginUser.personMessage}" id="value3">
                        <span class="Career"><input class="layui-input" style="display: none;width: 200px" id="input3"></span>
                        <span class="Career"><button class="layui-btn" onclick="enter3()" style="display: none;float: right;margin-right: 15%;" id="btn3">确定</button></span>
                        <span class="Career"><button class="layui-btn" onclick="display3()" style="float: right;margin-right: 15%;" id="b3">编辑</button></span><br />

                        <i class="layui-icon" style="font-size: 18px">&#xe677;</i>
                        <label> 微信:  </label>
                        <span class="interest" th:text="${session.loginUser.phoneNum}" id="phoneNum"></span>
                        <input type="hidden" th:value="${session.loginUser.phoneNum}" id="value4">
                        <span class="interest"><input class="layui-input" style="display: none;width: 200px" id="input4"></span>
                        <span class="interest"><button class="layui-btn" onclick="enter4()" style="display: none;float: right;margin-right: 15%;" id="btn4">确定</button></span>
                        <span class="interest"><button class="layui-btn" onclick="display4()" style="float: right;margin-right: 15%;" id="b4">编辑</button></span><br />
                    </p>
                </div>
            </div>
        </div>
        <!--<div class="item tool">
            <div class="title">
                <h3>我的技能</h3>
            </div>
            <div class="layui-fluid">
                <div class="layui-row">
                    <div class="layui-col-xs6 layui-col-sm3 layui-col-md3">
                        <div class="cont-box">
                            <img src="../res/img/gr_img2.jpg">
                            <p>80%</p>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm3 layui-col-md3">
                        <div class="cont-box">
                            <img src="../res/img/gr_img3.jpg">
                            <p>80%</p>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm3 layui-col-md3">
                        <div class="cont-box">
                            <img src="../res/img/gr_img4.jpg">
                            <p>80%</p>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm3 layui-col-md3">
                        <div class="cont-box">
                            <img src="../res/img/gr_img5.jpg">
                            <p>80%</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->
        <!--<div class="item contact">
            <div class="title">
                <h3>联系方式</h3>
            </div>
        </div>-->
    </div>
</div>

<div class="footer-wrap">
    <div class="footer w1000">
        <div class="qrcode">
            <img src="../res/img/erweima.jpg">
        </div>
        <div class="practice-mode">
            <img src="../res/img/down_img.jpg">
            <div class="text">
                <h4 class="title">我的联系方式</h4>
                <p>微信<span class="WeChat">15521306790</span></p>
                <p>手机<span class="iphone">15521306790</span></p>
                <p>邮箱<span class="email">1115051923@qq.com</span></p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../res/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '../res/js/util/'
    }).use(['element','laypage','form','layer','menu'],function(){
        element = layui.element,laypage = layui.laypage,form = layui.form,layer = layui.layer,menu = layui.menu;
        menu.init();
    })
</script>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
    function search() {
        document.getElementById("searchForm").submit();//js原生方式表单提交
    }
    function display1() {
        var value1 = document.getElementById("value1").value;
        document.getElementById("name").style.display="none";
        document.getElementById("input1").style.display="inline";
        $("#input1").val(value1);
        document.getElementById("btn1").style.display="inline";
        document.getElementById("b1").style.display="none";
    }
    function display2() {
        var value2 = document.getElementById("value2").value;
        document.getElementById("age").style.display="none";
        document.getElementById("input2").style.display="inline";
        $("#input2").val(value2);
        document.getElementById("btn2").style.display="inline";
        document.getElementById("b2").style.display="none";
    }
    function display3() {
        var value3 = document.getElementById("value3").value;
        document.getElementById("personMessage").style.display="none";
        document.getElementById("input3").style.display="inline";
        $("#input3").val(value3);
        document.getElementById("btn3").style.display="inline";
        document.getElementById("b3").style.display="none";
    }
    function display4() {
        var value4 = document.getElementById("value4").value;
        document.getElementById("phoneNum").style.display="none";
        document.getElementById("input4").style.display="inline";
        $("#input4").val(value4);
        document.getElementById("btn4").style.display="inline";
        document.getElementById("b4").style.display="none";
    }
    function enter1() {
        var value1 = document.getElementById("input1").value;
        var id = document.getElementById("id").value;
        $("#value1").val(value1);
        document.getElementById("name").style.display="inline";
        document.getElementById("name").innerHTML=value1;
        document.getElementById("input1").style.display="none";
        document.getElementById("btn1").style.display="none";
        document.getElementById("b1").style.display="inline";
        $.ajax({
            type:"POST",
            url:"http://localhost:8080/updateUser",
            data:{"name":value1,"userId":id},
            success:function (data) {
            },
            error:function   (data) {
            }
        });
    }
    function enter2() {
        var id = document.getElementById("id").value;
        var value2 = document.getElementById("input2").value;
        $("#value2").val(value2);
        document.getElementById("age").style.display="inline";
        document.getElementById("age").innerHTML=value2;
        document.getElementById("input2").style.display="none";
        document.getElementById("btn2").style.display="none";
        document.getElementById("b2").style.display="inline";
        $.ajax({
            type:"POST",
            url:"http://localhost:8080/updateUser",
            data:{"age":value2,"userId":id},
            success:function (data) {
            },
            error:function   (data) {
            }
        });
    }
    function enter3() {
        var id = document.getElementById("id").value;
        var value3 = document.getElementById("input3").value;
        $("#value3").val(value3);
        document.getElementById("personMessage").style.display="inline";
        document.getElementById("personMessage").innerHTML=value3;
        document.getElementById("input3").style.display="none";
        document.getElementById("btn3").style.display="none";
        document.getElementById("b3").style.display="inline";
        $.ajax({
            type:"POST",
            url:"http://localhost:8080/updateUser",
            data:{"personMessage":value3,"userId":id},
            success:function (data) {
            },
            error:function   (data) {
            }
        });
    }
    function enter4() {
        var id = document.getElementById("id").value;
        var value4 = document.getElementById("input4").value;
        $("#value4").val(value4);
        document.getElementById("phoneNum").style.display="inline";
        document.getElementById("phoneNum").innerHTML=value4;
        document.getElementById("input4").style.display="none";
        document.getElementById("btn4").style.display="none";
        document.getElementById("b4").style.display="inline";
        $.ajax({
            type:"POST",
            url:"http://localhost:8080/updateUser",
            data:{"phoneNum":value4,"userId":id},
            success:function (data) {
            },
            error:function   (data) {
            }
        });
    }
</script>
</body>
</html>